<template>
  <div id="graphs">
    <div id="kg-graph" style="width: auto; height: 350px; margin: auto"></div>
  </div>
</template>

<script>
export default {
  name: "graphs",
  props: ["nodes", "edges"],
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("kg-graph"));

      let option = {
        legend: {
          right: "10%", //标签图例距离右的距离
          data: [
            "Disease",
            "Check",
            "Symptom",
            "Producer",
            "Drug",
            "Food",
            "Department",
          ],
        },
        series: [
          {
            type: "graph",
            layout: "force",
            animation: false, // false:力引导布局会在多次迭代后才会稳定(当节点数大于100时不建议置为false)
            symbolSize: 15, // 节点大小
            roam: true, //开启鼠标缩放和平移
            label: {
              // show属性决定是默认显示（true）还是鼠标悬停（false）才显示，鼠标放置节点点显示的内容，对应data.name
              show: true,
              position: "top",
              formatter: "{b}",
            },
            draggable: true,
            nodes: this.nodes,
            edges: this.edges,
            categories: [
              {
                name: "Disease",
                keyword: {},
                base: "Disease",
              },
              {
                name: "Check",
                keyword: {},
                base: "Check",
              },
              {
                name: "Symptom",
                keyword: {},
                base: "Symptom",
              },
              {
                name: "Producer",
                keyword: {},
                base: "Producer",
              },
              {
                name: "Drug",
                keyword: {},
                base: "Drug",
              },
              {
                name: "Food",
                keyword: {},
                base: "Food",
              },
              {
                name: "Department",
                keyword: {},
                base: "Department",
              },
            ],
            force: {
              // 下面三个参数共同调节边长度
              edgeLength: 80, //边的默认长度
              repulsion: 50, // 斥力
              gravity: 0.05, // 引力
            },
            // data: [
            //   {
            //     name: "CSSFontFaceRule",
            //     category: 0,
            //   },
            //   {
            //     name: "CSSStyleDeclaration",
            //     category: 3,
            //   },
            //   {
            //     name: "CSSImportRule",
            //     category: 3,
            //   },
            //   {
            //     name: "MediaList",
            //     category: 4,
            //   },
            //   {
            //     name: "CSSStyleSheet",
            //     category: 3,
            //   },
            // ],
            // edges: [
            //   {
            //     source: 0,
            //     target: 1,
            //   },
            //   {
            //     source: 0,
            //     target: 2,
            //   },
            //   {
            //     source: 0,
            //     target: 3,
            //   },
            // ],
            edgeSymbol: ["none", "arrow"], // 设置连线两端形状
            edgeLabel: {
              //线条的边缘标签
              normal: {
                show: true,
                textStyle: {
                  fontSize: 10,
                },
                //通过回调函数设置连线上的标签
                formatter: function (x) {
                  // console.log(x);s
                  return x.data.label;
                },
              },
            },
          },
        ],
        // toolbox开启图片保存功能
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {
              show: true,
              excludeComponents: ["toolbox"],
              pixelRatio: 2,
            },
          },
        },
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

      let that = this;
      // 节点点击事件
      myChart.on("click", function (param) {
        if (param.dataType == "node") {
          // 子组件向父组件传值
          that.$emit("node-click", param.data.name); // 此处的方法名不支持驼峰命名法
        }
      });
    },
  },
  watch: {
    nodes: {
      handler(val) {
        this.drawChart();
        console.log("执行了watch");
      },
    },
  },
  mounted() {
    console.log("执行了mounted");
    this.drawChart();
  },
};
</script>